igniteui-theming 6.2.0-beta.1 → 6.2.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "6.2.0-beta.1",
+  "version": "6.2.0-beta.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/schemas/components/dark/_bottom-nav.scss

@@ -24,14 +24,23 @@ $dark-bootstrap-bottom-nav: $bootstrap-bottom-nav;
 
 /// Generates a dark indigo bottom-nav schema.
 /// @type {Map}
+/// @prop {Map} border-color [color: ('gray', 100)] - The border color of the bottom navigation.
 /// @prop {Map} icon-color [contrast-color: ('gray', 50, .6)] - The icon color in idle state.
-/// @prop {Map} icon-selected-color [color: ('primary', 300)] - The icon color used for the selected item.
+/// @prop {Map} icon-selected-color [color: ('primary', 200)] - The icon color used for the selected item.
 /// @prop {Map} label-color [contrast-color: ('gray', 50, .8)] - The label color in idle state.
 /// @prop {Map} label-selected-color [color: ('primary', 200)] - The label color used for the selected item.
+/// @prop {Map} icon-disabled-color [contrast-color: ('gray', 50, .2)] - The disabled color of the icon.
+/// @prop {Map} label-disabled-color [contrast-color: ('gray', 50, .2)] - The disabled color of the label.
 /// @requires $indigo-bottom-nav
 $dark-indigo-bottom-nav: extend(
     $indigo-bottom-nav,
     (
+        border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
         icon-color: (
             contrast-color: (
                 'gray',
@@ -39,14 +48,12 @@ $dark-indigo-bottom-nav: extend(
                 0.6,
             ),
         ),
-
         icon-selected-color: (
             color: (
                 'primary',
-                300,
+                200,
             ),
         ),
-
         label-color: (
             contrast-color: (
                 'gray',
@@ -54,12 +61,25 @@ $dark-indigo-bottom-nav: extend(
                 0.8,
             ),
         ),
-
         label-selected-color: (
             color: (
                 'primary',
                 200,
             ),
         ),
+        icon-disabled-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        label-disabled-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
     )
 );

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

@@ -81,7 +81,7 @@ $dark-bootstrap-navdrawer: extend(
 
 /// Generates a dark indigo navdrawer schema.
 /// @type {Map}
-/// @prop {Map} item-header-text-color [color: ('gray', 700)] - The header's idle text color.
+/// @prop {Map} item-header-text-color [contrast-color: ('gray', 50, 0.6)] - The header's idle text color.
 /// @prop {Map} item-text-color [contrast-color: ('gray', 50, 0.8)] - The item's idle text color.
 /// @prop {Map} item-icon-color [contrast-color: ('gray', 50, 0.6)] - The item's icon color.
 /// @prop {Map} item-active-text-color [color: ('primary', 100)] - The item's active text color.
@@ -103,9 +103,10 @@ $dark-indigo-navdrawer: extend(
         ),
 
         item-header-text-color: (
-            color: (
+            contrast-color: (
                 'gray',
-                700,
+                50,
+                0.6,
             ),
         ),
 

package/sass/themes/schemas/components/elevation/_bottom-nav.scss

@@ -17,7 +17,7 @@ $fluent-elevation-bottom-nav: (
 );
 
 /// @type Map
-/// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the bottom nav.
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the bottom nav.
 $indigo-elevation-bottom-nav: (
-    elevation: 4,
+    elevation: 0,
 );

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

@@ -15,9 +15,3 @@ $default-elevation-navbar: (
 $bootstrap-elevation-navbar: (
     elevation: 0,
 );
-
-/// @type Map
-/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the navbar.
-$indigo-elevation-navbar: (
-    elevation: 0,
-);

package/sass/themes/schemas/components/light/_bottom-nav.scss

@@ -14,7 +14,10 @@
 /// @prop {Map} icon-color [color: ('gray', 700)] - The icon color used in idle state.
 /// @prop {Map} icon-selected-color [color: ('primary', 500)] - The icon color used for the selected item.
 /// @prop {Map} label-color [color: ('gray', 700)] - The label color used in idle state.
+/// @prop {Map} icon-disabled-color [color: ('gray', 700)] - The disabled color of the icon.
+/// @prop {Map} label-disabled-color [color: ('gray', 700)] - The disabled color of the label.
 /// @prop {Map} label-selected-color [color: ('primary', 500)] - The label color used for the selected item.
+/// @prop {Color} border-color [transparent] - The border color of the bottom navigation.
 /// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the bottom nav.
 /// @requires {Map} $default-elevation-bottom-nav
 $light-bottom-nav: extend(
@@ -50,6 +53,19 @@ $light-bottom-nav: extend(
                 500,
             ),
         ),
+        icon-disabled-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        label-disabled-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        border-color: transparent,
     )
 );
 
@@ -72,9 +88,12 @@ $bootstrap-bottom-nav: $light-bottom-nav;
 
 /// Generates an indigo bottom navigation schema.
 /// @type {Map}
+/// @prop {Map} border-color [color: ('gray', 300)] - The border color of the bottom navigation.
 /// @prop {Map} background [color: 'surface'] - The background color used for the bottom nav.
 /// @prop {Map} icon-color [color: ('gray', 600)] - The icon color used in idle state.
 /// @prop {Map} label-color [color: ('gray', 800)] - The label color used in idle state.
+/// @prop {Map} icon-disabled-color [color: ('gray', 900, .2)] - The disabled color of the icon.
+/// @prop {Map} label-disabled-color [color: ('gray', 900, .2)] - The disabled color of the label.
 /// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the bottom nav.
 /// @requires {Map} $light-bottom-nav
 /// @requires {Map} $indigo-elevation-bottom-nav
@@ -82,6 +101,12 @@ $indigo-bottom-nav: extend(
     $light-bottom-nav,
     $indigo-elevation-bottom-nav,
     (
+        border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
         background: (
             color: 'surface',
         ),
@@ -97,5 +122,19 @@ $indigo-bottom-nav: extend(
                 800,
             ),
         ),
+        icon-disabled-color: (
+            color: (
+                'gray',
+                900,
+                0.2,
+            ),
+        ),
+        label-disabled-color: (
+            color: (
+                'gray',
+                900,
+                0.2,
+            ),
+        ),
     )
 );

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

@@ -135,5 +135,4 @@ $bootstrap-navbar: extend(
 /// @type {Map}
 /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the navbar.
 /// @requires {Map} $light-navbar
-/// @requires {Map} $indigo-elevation-navbar
-$indigo-navbar: extend($light-navbar, $indigo-elevation-navbar);
+$indigo-navbar: $light-navbar;