igniteui-theming 6.2.0-beta.2 → 6.2.0

package/package.json

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

@@ -24,61 +24,28 @@ $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', 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.
+/// @prop {Map} background [color: 'surface'] - The background color used for the bottom-nav.
+/// @prop {Color} active-item-color [color: ('gray', 700)] - The text-color used for the active color.
+/// @prop {Map} idle-item-color [color: ('gray', 400)] - The text-color used for the idle color.
 /// @requires $indigo-bottom-nav
 $dark-indigo-bottom-nav: extend(
     $indigo-bottom-nav,
     (
-        border-color: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-        icon-color: (
-            contrast-color: (
-                'gray',
-                50,
-                0.6,
-            ),
+        background: (
+            color: 'surface',
         ),
-        icon-selected-color: (
+
+        active-item-color: (
             color: (
-                'primary',
-                200,
-            ),
-        ),
-        label-color: (
-            contrast-color: (
                 'gray',
-                50,
-                0.8,
+                700,
             ),
         ),
-        label-selected-color: (
+
+        idle-item-color: (
             color: (
-                'primary',
-                200,
-            ),
-        ),
-        icon-disabled-color: (
-            contrast-color: (
-                'gray',
-                50,
-                0.2,
-            ),
-        ),
-        label-disabled-color: (
-            contrast-color: (
                 'gray',
-                50,
-                0.2,
+                400,
             ),
         ),
     )

package/sass/themes/schemas/components/dark/_button-group.scss

@@ -13,7 +13,7 @@
 /// @prop {Map} item-hover-border-color [color: ('gray', 100)] - The hover border color between button group items.
 /// @prop {Map} item-focused-border-color [color: ('gray', 100)] - The focused border color for an item from the button group.
 /// @prop {Map} item-hover-background [color: ('gray', 100), .8] - The hover background color for button group items.
-/// @prop {Map} item-focused-background [color: ('gray', 100), .8] - The focused background color for button group items.
+/// @prop {Map} item-focused-background [color: ('gray', 700), .3] - The focused background color for button group items.
 /// @prop {Map} item-selected-background [color: ('gray', 200)] - The background color for a selected item in the button group.
 /// @prop {Map} item-selected-hover-background [color: ('gray', 300, .8)] - The hover background color for a selected item in hover or focus state in the button group.
 /// @prop {Map} item-selected-border-color [color: ('gray', 300)] - The border color for button group selected items.
@@ -53,8 +53,8 @@ $base-dark-button-group: (
     item-focused-background: (
         color: (
             'gray',
-            100,
-            0.8,
+            700,
+            0.3,
         ),
     ),
 
@@ -104,9 +104,31 @@ $base-dark-button-group: (
 
 /// Generates a dark material button-group schema based on a mix of $light-button-group and $base-dark-button-group
 /// @type {Map}
+/// @prop {Map} item-focused-hover-background [color: ('gray', 500, .3)] - The focused & hover background color for button group items.
+/// @prop {Map} item-selected-focus-hover-background [color: ('gray', 400, .8)] - The background color for a selected item in focused & hover state in the button group.
 /// @requires $material-button-group
 /// @requires $base-dark-button-group
-$dark-material-button-group: extend($material-button-group, $base-dark-button-group);
+$dark-material-button-group: extend(
+    $material-button-group,
+    $base-dark-button-group,
+    (
+        item-focused-hover-background: (
+            color: (
+                'gray',
+                500,
+                0.3,
+            ),
+        ),
+
+        item-selected-focus-hover-background: (
+            color: (
+                'gray',
+                400,
+                0.8,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark fluent button-group schema based on a mix of $fluent-button-group and $base-dark-button-group
 /// @type {Map}
@@ -116,8 +138,9 @@ $dark-material-button-group: extend($material-button-group, $base-dark-button-gr
 /// @prop {Map} item-hover-background [color: ('gray', 50)] - The background color for button group items on hover.
 /// @prop {Map} item-focused-background [color: ('gray', 100)] - The focused background color for button group items.
 /// @prop {Map} item-selected-background [color: ('gray', 200)] - The background color for button group selected items.
-/// @prop {Map} item-selected-hover-background [color: ('gray', 300)] - The background color for a selected item in hover or focus state in the button group.
 /// @prop {Map} item-selected-border-color [color: ('gray', 400)] - The border color for button group selected items.
+/// @prop {Map} item-selected-focus-background [color: ('gray', 300)] - The background color for a selected item in focus state in the button group.
+/// @prop {Map} item-selected-hover-background [color: ('gray', 400, .3)] - The background color for a selected item in hover or focus state in the button group.
 /// @prop {Map} item-selected-hover-border-color [color: ('gray', 400)] - The border color for a selected item in hover state in the button group.
 /// @prop {Map} item-disabled-border: [color: ('gray', 400)] - The border color for button group disabled items.
 /// @prop {Map} disabled-text-color [color: ('gray', 300)]- The text/icon color for a disabled item in the button group.
@@ -172,17 +195,25 @@ $dark-fluent-button-group: extend(
             ),
         ),
 
-        item-selected-hover-background: (
+        item-selected-border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        item-selected-focus-background: (
             color: (
                 'gray',
                 300,
             ),
         ),
 
-        item-selected-border-color: (
+        item-selected-hover-background: (
             color: (
                 'gray',
                 400,
+                0.3,
             ),
         ),
 
@@ -246,6 +277,7 @@ $dark-bootstrap-button-group: $bootstrap-button-group;
 /// @prop {Map} item-hover-text-color [contrast-color: ('gray', 50)] - The hover text color for button group items.
 /// @prop {Map} item-hover-icon-color [contrast-color: ('gray', 50)] - The hover icon color for button group items.
 /// @prop {Map} item-hover-border-color [color: ('gray', 200)] - The hover border color between button group items.
+/// @prop {Map} item-focused-border-color [color: ('gray', 100)] - The focused border color for an item from the button group.
 /// @prop {Map} item-focused-text-color [contrast-color: ('gray', 50, .8)] - The focused text color for button group items.
 /// @prop {Map} item-focused-background [contrast-color: ('gray', 50, .05)] - The focused background color for button group items.
 /// @prop {Color} disabled-background-color [transparent] - The background color for a disabled item in the button group.
@@ -325,6 +357,13 @@ $dark-indigo-button-group: extend(
             ),
         ),
 
+        item-focused-border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
         item-focused-text-color: (
             contrast-color: (
                 'gray',

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

@@ -88,7 +88,9 @@ $dark-material-button: (
 /// @type {Map}
 /// @prop {Map} focus-visible-border-color [color: ('gray', 400)] - The focus-visible border color of a contained button.
 /// @prop {Map} hover-background [color: ('gray', 50)] - The hover background of a contained button.
+/// @prop {Map} focus-background [color: ('gray', 100)] - The background color of a contained button when focused with click and keyboard.
 /// @prop {Map} focus-hover-background [color: ('gray', 50)] - The background color on focus hovered state of the button.
+/// @prop {Map} active-background [color: ('gray', 100)] - The active background color of a contained button.
 /// @prop {Map} disabled-background [color: ('gray', 50)] - The disabled background color of the button.
 /// @prop {Map} disabled-foreground [color: ('gray', 200)] - The disabled foreground color of the button.
 /// @prop {Map} disabled-icon-color [color: ('gray', 200)] - The disabled icon color of the button.
@@ -105,12 +107,24 @@ $fluent-base-button-dark: (
             50,
         ),
     ),
+    focus-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
     focus-hover-background: (
         color: (
             'gray',
             50,
         ),
     ),
+    active-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
     disabled-background: (
         color: (
             'gray',
@@ -143,11 +157,10 @@ $fluent-flat-button-dark: extend(
     )
 );
 
-/// @prop {Map} focus-border-color [color: ('gray', 400)] - The focus border color of a contained button.
-/// @prop {Map} active-background [color: ('gray', 100, .8)] - The active background color of an outlined button.
-/// @prop {Map} active-foreground [contrast-color: ('gray' 100)] - The active text color of an outlined button.
 /// @prop {Map} border-color [color: ('gray', 400)] - The border color of an outlined button.
 /// @prop {Map} hover-border-color [color: ('gray', 400)] - The hover border color of an outlined button.
+/// @prop {Map} focus-border-color [color: ('gray', 400)] - The focus border color of a contained button.
+/// @prop {Map} active-border-color [color: ('gray', 400)] - The active border color of an outlined button.
 /// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled focused border color of an outlined button.
 /// @requires {Map} $fluent-outlined-button
 /// @requires {Map} $fluent-base-button-dark
@@ -155,32 +168,25 @@ $fluent-outlined-button-dark: extend(
     $fluent-outlined-button,
     $fluent-base-button-dark,
     (
-        focus-border-color: (
+        border-color: (
             color: (
                 'gray',
                 400,
             ),
         ),
-        active-background: (
+        hover-border-color: (
             color: (
                 'gray',
-                100,
-                0.8,
-            ),
-        ),
-        active-foreground: (
-            contrast-color: (
-                'gray',
-                100,
+                400,
             ),
         ),
-        border-color: (
+        focus-border-color: (
             color: (
                 'gray',
                 400,
             ),
         ),
-        hover-border-color: (
+        active-border-color: (
             color: (
                 'gray',
                 400,
@@ -203,13 +209,13 @@ $fluent-outlined-button-dark: extend(
 /// @prop {Map} focus-visible-border-color [contrast-color: ('primary', 300)] - The focus-visible border color of a contained button.
 /// @prop {Map} hover-background [color: ('primary', 200)] - The hover background of a contained button.
 /// @prop {Map} hover-foreground [contrast-color: ('primary', 500)] - The hover text color of a contained button.
-/// @prop {Map} focus-background [color: ('primary', 300)] - The focus background color of a contained button.
-/// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The focus text color of a contained button.
+/// @prop {Map} focus-background [color: ('primary', 100)] - The background color of a contained button when focused with click and keyboard.
+/// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The text color of a contained button when focused with click and keyboard.
 /// @prop {Map} focus-hover-background [color: ('primary', 200)] - The background color on focus hovered state of the button.
 /// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 500)] - The text color on focus hovered state of the button.
 /// @prop {Map} focus-visible-background [color: ('primary', 300)] - The focus-visible background color of a contained button.
 /// @prop {Map} focus-visible-foreground [contrast-color: ('primary', 500)] - The focus-visible text color of a contained button.
-/// @prop {Map} active-background [color: ('primary', 200)] - The active background color of a contained button.
+/// @prop {Map} active-background [color: ('primary', 100)] - The active background color of a contained button.
 /// @prop {Map} active-foreground [contrast-color: ('primary', 500)] - The active text color of a contained button.
 /// @requires {Map} $fluent-contained-button
 /// @requires {Map} $fluent-base-button-dark
@@ -256,7 +262,7 @@ $fluent-contained-button-dark: extend(
         focus-background: (
             color: (
                 'primary',
-                300,
+                100,
             ),
         ),
         focus-foreground: (
@@ -298,7 +304,7 @@ $fluent-contained-button-dark: extend(
         active-background: (
             color: (
                 'primary',
-                200,
+                100,
             ),
         ),
         active-foreground: (
@@ -319,13 +325,13 @@ $fluent-contained-button-dark: extend(
 /// @prop {Map} active-border-color [color: ('primary', 200)] - The active border color of a contained button.
 /// @prop {Map} hover-background [color: ('primary', 200)] - The hover background of a contained button.
 /// @prop {Map} hover-foreground [contrast-color: ('primary', 300)] - The hover text color of a contained button.
-/// @prop {Map} focus-background [color: ('primary', 300)] - The focus background color of a contained button.
-/// @prop {Map} focus-foreground [contrast-color: ('primary', 300)] - The focus text color of a contained button.
+/// @prop {Map} focus-background [color: ('primary', 100)] - The background color of a contained button when focused with click and keyboard.
+/// @prop {Map} focus-foreground [contrast-color: ('primary', 300)] - The text color of a contained button when focused with click and keyboard.
 /// @prop {Map} focus-hover-background [color: ('primary', 200)] - The background color on focus hovered state of the button.
 /// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 300)] - The text color on focus hovered state of the button.
 /// @prop {Map} focus-visible-background [color: ('primary', 300)] - The focus-visible background color of a contained button.
 /// @prop {Map} focus-visible-foreground [contrast-color: ('primary', 300)] - The focus-visible text color of a contained button.
-/// @prop {Map} active-background [color: ('primary', 200)] - The active background color of a contained button.
+/// @prop {Map} active-background [color: ('primary', 100)] - The active background color of a contained button.
 /// @prop {Map} active-foreground [contrast-color: ('primary', 300)] - The active text color of a contained button.
 /// @requires {Map} $fluent-fab-button
 /// @requires {Map} $fluent-base-button-dark
@@ -372,7 +378,7 @@ $fluent-fab-button-dark: extend(
         focus-background: (
             color: (
                 'primary',
-                300,
+                100,
             ),
         ),
         focus-foreground: (
@@ -414,7 +420,7 @@ $fluent-fab-button-dark: extend(
         active-background: (
             color: (
                 'primary',
-                200,
+                100,
             ),
         ),
         active-foreground: (
@@ -453,14 +459,14 @@ $dark-bootstrap-button: (
 );
 
 /// @type {Map}
-/// @prop {Map} foreground [contrast-color: ('primary', 500)] - The idle text color of a flat button.
+/// @prop {Map} foreground [contrast-color: ('primary', 500)] - The idle text color of the button.
 /// @prop {Map} icon-color [contrast-color: ('primary', 500, 0.8)] - The idle icon color of the button.
 /// @prop {Map} icon-color-hover [contrast-color: ('primary', 500)] - The hover icon color of the button.
-/// @prop {Map} hover-foreground [contrast-color: ('primary', 500)] - The hover text color of a flat button.
-/// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The focus text color of a flat button.
+/// @prop {Map} hover-foreground [contrast-color: ('primary', 500)] - The hover text color of the button.
+/// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The text color of the button when focused with click and keyboard.
 /// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 500)] - The text color on focus hovered state of the button.
-/// @prop {Map} active-foreground [contrast-color: ('primary', 500)] - The active text color of a flat button.
-/// @prop {Map} focus-visible-foreground [contrast-color: ('primary', 500)] - The focus-visible text color of a flat button.
+/// @prop {Map} active-foreground [contrast-color: ('primary', 500)] - The active text color of the button.
+/// @prop {Map} focus-visible-foreground [contrast-color: ('primary', 500)] - The focus-visible text color of the button.
 /// @prop {Map} disabled-foreground [contrast-color: ('primary', 500, 0.20)] - The disabled foreground color of the button.
 /// @prop {Map} disabled-icon-color [contrast-color: ('primary', 500, 0.30)] - The disabled icon color of the button.
 $indigo-base-button-dark: (
@@ -530,9 +536,11 @@ $indigo-base-button-dark: (
 );
 
 /// @type {Map}
-/// @prop {Map} hover-background [contrast-color: ('primary', 500, 0.10)] - The hover background color of a flat button.
-/// @prop {Map} focus-hover-background [contrast-color: ('primary', 500, 0.10] - The background color on focus hovered state of the button.
-/// @prop {Map} shadow-color [contrast-color: ('primary', 500, 0.20)] - The shadow color of a flat button.
+/// @prop {Map} hover-background [contrast-color: ('primary', 500, 0.1)] - The hover background color of a flat button.
+/// @prop {Map} focus-hover-background [contrast-color: ('primary', 500, 0.1] - The background color on focus hovered state of a flat button.
+/// @prop {Map} focus-background [contrast-color: ('primary', 500, 0.1)] - The background color of a flat button when focused with click and keyboard.
+/// @prop {Map} active-background [contrast-color: ('primary', 500, 0.1)] - The active background color of a flat button.
+/// @prop {Map} shadow-color [contrast-color: ('primary', 500, 0.2)] - The shadow color of a flat button.
 /// @requires {Map} $indigo-flat-button
 /// @requires {Map} $indigo-base-button-dark
 $indigo-flat-button-dark: extend(
@@ -553,6 +561,20 @@ $indigo-flat-button-dark: extend(
                 0.1,
             ),
         ),
+        focus-background: (
+            contrast-color: (
+                'primary',
+                500,
+                0.1,
+            ),
+        ),
+        active-background: (
+            contrast-color: (
+                'primary',
+                500,
+                0.1,
+            ),
+        ),
         shadow-color: (
             contrast-color: (
                 'primary',
@@ -564,15 +586,17 @@ $indigo-flat-button-dark: extend(
 );
 
 /// @type {Map}
-/// @prop {Map} border-color [contrast-color: ('primary', 500, 0.60)] - The border color of an outlined button.
-/// @prop {Map} hover-background [contrast-color: ('primary', 500, 0.10)] - The hover background color of a flat button.
-/// @prop {Map} hover-border-color [contrast-color: ('primary', 500, 0.80)] - The hover border color of a outlined button.
-/// @prop {Map} focus-hover-background [contrast-color: ('primary', 500, 0.10] - The background color on focus hovered state of the button.
-/// @prop {Map} focus-border-color [contrast-color: ('primary', 500, 0.60)] - The focus border color of a outlined button.
-/// @prop {Map} focus-visible-border-color [contrast-color: ('primary', 500, 0.60)] - The focus-visible border color of a outlined button.
-/// @prop {Map} active-border-color [contrast-color: ('primary', 500, 0.80))] - The active border color of a outlined button.
-/// @prop {Map} shadow-color [contrast-color: ('primary', 500, 0.20)] - The shadow color of a flat button.
-/// @prop {Map} disabled-border-color [contrast-color: ('primary', 500, 0.20)] - The disabled focused border color of an outlined button.
+/// @prop {Map} border-color [contrast-color: ('primary', 500, 0.6)] - The border color of an outlined button.
+/// @prop {Map} hover-background [contrast-color: ('primary', 500, 0.1)] - The hover background color of an outlined button.
+/// @prop {Map} hover-border-color [contrast-color: ('primary', 500, 0.8)] - The hover border color of an outlined button.
+/// @prop {Map} focus-hover-background [contrast-color: ('primary', 500, 0.1)] - The background color on focus hovered state of an outlined button.
+/// @prop {Map} focus-background [contrast-color: ('primary', 500, 0.1)] - The background color of an outlined button when focused with click and keyboard.
+/// @prop {Map} focus-border-color [contrast-color: ('primary', 500, 0.6)] - The focus border color of an outlined button.
+/// @prop {Map} focus-visible-border-color [contrast-color: ('primary', 500, 0.6)] - The focus-visible border color of an outlined button.
+/// @prop {Map} active-background [contrast-color: ('primary', 500, 0.1)] - The active background color of an outlined button.
+/// @prop {Map} active-border-color [contrast-color: ('primary', 500, 0.8)] - The active border color of an outlined button.
+/// @prop {Map} shadow-color [contrast-color: ('primary', 500, 0.2)] - The shadow color of an outlined button.
+/// @prop {Map} disabled-border-color [contrast-color: ('primary', 500, 0.2)] - The disabled focused border color of an outlined button.
 /// @requires {Map} $indigo-outlined-button
 /// @requires {Map} $indigo-base-button-dark
 $indigo-outlined-button-dark: extend(
@@ -607,6 +631,13 @@ $indigo-outlined-button-dark: extend(
                 0.1,
             ),
         ),
+        focus-background: (
+            contrast-color: (
+                'primary',
+                500,
+                0.1,
+            ),
+        ),
         focus-border-color: (
             contrast-color: (
                 'primary',
@@ -621,6 +652,13 @@ $indigo-outlined-button-dark: extend(
                 0.6,
             ),
         ),
+        active-background: (
+            contrast-color: (
+                'primary',
+                500,
+                0.1,
+            ),
+        ),
         active-border-color: (
             contrast-color: (
                 'primary',

package/sass/themes/schemas/components/dark/_icon-button.scss

@@ -330,6 +330,7 @@ $indigo-base-icon-button-dark: (
 
 /// Generates a dark indigo flat icon button schema.
 /// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The focus text color of the indigo icon button.
+/// @prop {Map} shadow-color [contrast-color: ('primary', 500, 0.2)] - The shadow color of a flat button.
 /// @type {Map}
 /// @requires {Map} $indigo-flat-icon-button
 $indigo-flat-icon-button-dark: extend(
@@ -343,6 +344,13 @@ $indigo-flat-icon-button-dark: extend(
                 0.8,
             ),
         ),
+        shadow-color: (
+            contrast-color: (
+                'primary',
+                500,
+                0.2,
+            ),
+        ),
     )
 );
 
@@ -350,6 +358,7 @@ $indigo-flat-icon-button-dark: extend(
 /// @type {Map}
 /// @prop {Map} border-color [contrast-color: ('primary', 500, 0.6)] - The border color of the indigo outlined icon button.
 /// @prop {Map} disabled-border-color [contrast-color: ('primary', 500, 0.2)] - The disabled border color of the indigo outlined icon button.
+/// @prop {Map} shadow-color [contrast-color: ('primary', 500, 0.2)] - The shadow color of the indigo outlined icon button.
 /// @requires {Map} $indigo-outlined-icon-button
 $indigo-outlined-icon-button-dark: extend(
     $indigo-outlined-icon-button,
@@ -369,6 +378,13 @@ $indigo-outlined-icon-button-dark: extend(
                 0.2,
             ),
         ),
+        shadow-color: (
+            contrast-color: (
+                'primary',
+                500,
+                0.2,
+            ),
+        ),
     )
 );
 

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

@@ -81,93 +81,64 @@ $dark-bootstrap-navdrawer: extend(
 
 /// Generates a dark indigo navdrawer schema.
 /// @type {Map}
-/// @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.
-/// @prop {Map} item-active-background [color: ('primary', 400, .3)] - The item's active background color.
-/// @prop {Map} item-active-icon-color [color: ('primary', 200)] - The item's icon active color.
-/// @prop {Map} item-hover-background [contrast-color: ('gray', 50, 0.1)] - The item's hover background color.
+/// @prop {Map} background [color: ('gray', 500)] - The navigation drawer background color.
+/// @prop {Map} item-header-text-color [contrast-color: ('gray', 50)] - The header's idle text color.
+/// @prop {Map} item-text-color [contrast-color: ('gray', 100) - The item's idle text color.
+/// @prop {Map} item-icon-color [contrast-color: ('gray', 100)] - The item's icon color.
+/// @prop {Map} item-active-background [contrast-color: ('gray', 400, .5)] - The item's active 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} border-color [color: ('gray', 100)] - The navigation drawer right border color.
+/// @prop {Map} item-hover-icon-color [contrast-color: ('gray', 50)] - The item's hover icon color.
 /// @requires $indigo-navdrawer
 $dark-indigo-navdrawer: extend(
     $indigo-navdrawer,
     (
-        border-color: (
+        background: (
             color: (
                 'gray',
-                100,
+                500,
             ),
         ),
 
         item-header-text-color: (
-            contrast-color: (
+            color: (
                 'gray',
                 50,
-                0.6,
             ),
         ),
 
         item-text-color: (
-            contrast-color: (
+            color: (
                 'gray',
-                50,
-                0.8,
+                100,
             ),
         ),
 
         item-icon-color: (
-            contrast-color: (
-                'gray',
-                50,
-                0.6,
-            ),
-        ),
-
-        item-active-background: (
-            color: (
-                'primary',
-                400,
-                0.3,
-            ),
-        ),
-
-        item-active-text-color: (
             color: (
-                'primary',
+                'gray',
                 100,
             ),
         ),
 
-        item-active-icon-color: (
+        item-hover-text-color: (
             color: (
-                'primary',
-                200,
-            ),
-        ),
-
-        item-hover-background: (
-            contrast-color: (
                 'gray',
                 50,
-                0.1,
             ),
         ),
 
-        item-hover-text-color: (
-            contrast-color: (
+        item-hover-icon-color: (
+            color: (
                 'gray',
                 50,
             ),
         ),
 
-        item-hover-icon-color: (
-            contrast-color: (
+        item-active-background: (
+            color: (
                 'gray',
-                50,
-                0.8,
+                400,
+                0.5,
             ),
         ),
     )