igniteui-theming 6.2.0 → 6.3.0-beta.1

package/package.json

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

@@ -24,28 +24,61 @@ $dark-bootstrap-bottom-nav: $bootstrap-bottom-nav;
 
 /// Generates a dark indigo bottom-nav schema.
 /// @type {Map}
-/// @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.
+/// @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.
 /// @requires $indigo-bottom-nav
 $dark-indigo-bottom-nav: extend(
     $indigo-bottom-nav,
     (
-        background: (
-            color: 'surface',
+        border-color: (
+            color: (
+                'gray',
+                100,
+            ),
         ),
-
-        active-item-color: (
+        icon-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.6,
+            ),
+        ),
+        icon-selected-color: (
             color: (
+                'primary',
+                200,
+            ),
+        ),
+        label-color: (
+            contrast-color: (
                 'gray',
-                700,
+                50,
+                0.8,
             ),
         ),
-
-        idle-item-color: (
+        label-selected-color: (
             color: (
+                'primary',
+                200,
+            ),
+        ),
+        icon-disabled-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        label-disabled-color: (
+            contrast-color: (
                 'gray',
-                400,
+                50,
+                0.2,
             ),
         ),
     )

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

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

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

@@ -136,77 +136,124 @@ $dark-bootstrap-switch: extend(
 
 /// Generates a dark indigo switch schema.
 /// @type {Map}
-/// @prop {Color} thumb-on-color [color: 'surface'] - The color of the thumb when the switch is on.
-/// @prop {Map} track-on-color [color: ('gray', 900)] - The color of the track when the switch is on.
-/// @prop {Map} thumb-off-color [color: ('gray', 700)] - The color of the thumb when the switch is off.
-/// @prop {Color} track-off-color [transparent] - The color of the track when the switch is off.
-/// @prop {Map} border-color [color: ('gray', 700)] - The border color of the switch.
-/// @prop {Map} border-hover-color [color: ('gray', 700)] - The border color of the switch on hover.
-/// @prop {Map} border-disabled-color [color: ('gray', 400)] - The border color of the disabled switch.
-/// @prop {Map} border-on-color [color: ('gray', 900)] - The border color of the on-switch.
-/// @prop {Map} border-on-hover-color [color: ('gray', 900)] - The border color of the  on-switch.
-/// @prop {Map} label-disabled-color [color: ('gray', 400)] - The color of the switch label when the switch is disabled
-/// @prop {Map} error-color [color: ('gray', 700)] - The border and thumb color in invalid state.
+/// @prop {Map} label-color [contrast-color: ('gray', 50, .8)] - The color of the switch label.
+/// @prop {Map} label-invalid-color [contrast-color: ('gray', 50, .8)] - The color of the switch label in invalid state.
+/// @prop {Map} label-hover-color [contrast-color: ('gray', 50)] - The color of the switch label on hover.
+/// @prop {Map} label-disabled-color [contrast-color: ('gray', 50, .2)] - The color of the switch label when the switch is disabled.
+/// @prop {Map} thumb-off-color [contrast-color: ('gray', 50, .6)] - The color of the thumb when the switch is off.
+/// @prop {Map} thumb-on-color [contrast-color: ('gray', 50)] - The color of the thumb when the switch is on.
+/// @prop {Map} thumb-disabled-color [contrast-color: ('gray', 50, .2)] - The color of the thumb when the switch is disabled.
+/// @prop {Map} thumb-on-disabled-color [contrast-color: ('gray', 50, .2)] - The color of the thumb when the switch is on and disabled.
+/// @prop {Map} track-on-hover-color [color: ('primary', 300)] - The color of the track when the switch is on and hovered.
+/// @prop {Map} border-color [contrast-color: ('gray', 50, .6)] - The border color of the switch.
+/// @prop {Map} border-hover-color [contrast-color: ('gray', 50, .8)] - The border color of the switch on hover.
+/// @prop {Map} border-disabled-color [contrast-color: ('gray', 50, .2)] - The border color of the disabled switch.
+/// @prop {Map} border-on-hover-color [color: ('primary', 300)] - The border color of the  on-switch.
+/// @prop {Map} error-color [contrast-color: ('gray', 50, .6)] - The border and thumb color in invalid state.
+/// @prop {Map} focus-outline-color [contrast-color: ('gray', 50, .2)] - The focus outlined color.
 /// @requires $indigo-switch
 $dark-indigo-switch: extend(
     $indigo-switch,
     (
-        border-color: (
-            color: (
+        label-color: (
+            contrast-color: (
                 'gray',
-                700,
+                50,
+                0.8,
             ),
         ),
-        border-hover-color: (
-            color: (
+        label-invalid-color: (
+            contrast-color: (
                 'gray',
-                700,
+                50,
+                0.8,
             ),
         ),
-        border-disabled-color: (
-            color: (
+        label-hover-color: (
+            contrast-color: (
                 'gray',
-                400,
+                50,
             ),
         ),
-        border-on-color: (
-            color: (
+        label-disabled-color: (
+            contrast-color: (
                 'gray',
-                900,
+                50,
+                0.2,
             ),
         ),
-        border-on-hover-color: (
-            color: (
+        thumb-off-color: (
+            contrast-color: (
                 'gray',
-                900,
+                50,
+                0.6,
             ),
         ),
         thumb-on-color: (
-            color: 'surface',
+            contrast-color: (
+                'gray',
+                50,
+            ),
         ),
-        thumb-off-color: (
-            color: (
+        thumb-disabled-color: (
+            contrast-color: (
                 'gray',
-                700,
+                50,
+                0.2,
             ),
         ),
-        track-on-color: (
-            color: (
+        thumb-on-disabled-color: (
+            contrast-color: (
                 'gray',
-                900,
+                50,
+                0.2,
             ),
         ),
-        track-off-color: transparent,
-        label-disabled-color: (
+        track-on-hover-color: (
             color: (
+                'primary',
+                300,
+            ),
+        ),
+        border-color: (
+            contrast-color: (
                 'gray',
-                400,
+                50,
+                0.6,
             ),
         ),
-        error-color: (
+        border-hover-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        border-disabled-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        border-on-hover-color: (
             color: (
+                'primary',
+                300,
+            ),
+        ),
+        error-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.6,
+            ),
+        ),
+        focus-outline-color: (
+            contrast-color: (
                 'gray',
-                700,
+                50,
+                0.2,
             ),
         ),
     )

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

@@ -10,9 +10,14 @@
 
 /// Generates a light bottom navigation scheme.
 /// @type {Map}
-/// @prop {Color} background [color: ('gray', 50))] - The background color used for the toast.
-/// @prop {Map} idle-item-color [color: ('gray', 700)] - The text-color used for the idle color.
-/// @prop {Map} active-item-color [color: ('primary', 500)] - The text-color used for the active color.
+/// @prop {Map} background [color: ('gray', 50)] - The background color used for the bottom nav.
+/// @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(
@@ -24,20 +29,43 @@ $light-bottom-nav: extend(
                 50,
             ),
         ),
-
-        idle-item-color: (
+        icon-color: (
             color: (
                 'gray',
                 700,
             ),
         ),
-
-        active-item-color: (
+        icon-selected-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        label-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        label-selected-color: (
             color: (
                 'primary',
                 500,
             ),
         ),
+        icon-disabled-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        label-disabled-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        border-color: transparent,
     )
 );
 
@@ -60,7 +88,53 @@ $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
-$indigo-bottom-nav: extend($light-bottom-nav, $indigo-elevation-bottom-nav);
+$indigo-bottom-nav: extend(
+    $light-bottom-nav,
+    $indigo-elevation-bottom-nav,
+    (
+        border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        background: (
+            color: 'surface',
+        ),
+        icon-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        label-color: (
+            color: (
+                'gray',
+                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;

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

@@ -150,100 +150,101 @@ $bootstrap-navdrawer: extend(
 
 /// Generates an indigo navdrawer schema.
 /// @type {Map}
-/// @prop {Map} background [color: ('gray', 700)] - The navigation drawer background color.
-/// @prop {Map} item-header-text-color [contrast-color: ('gray', 700)] - The header's idle text color.
-/// @prop {Map} item-text-color [contrast-color: ('gray', 700, .8)] - The item's idle text color.
-/// @prop {Map} item-icon-color [contrast-color: ('gray', 700, .8)] - The item's icon color.
-/// @prop {Map} item-active-text-color [contrast-color: ('gray', 700)] - The item's active text color.
-/// @prop {Map} item-active-background [contrast-color: ('gray', 700, .1)] - The item's active background color.
-/// @prop {Map} item-active-icon-color [contrast-color: ('gray', 700)] - The item's icon active color.
-/// @prop {Color} item-hover-background [transparent] - The item's hover background color.
-/// @prop {Map} item-hover-text-color [contrast-color: ('gray', 700)] - The item's hover text color.
-/// @prop {Map} item-hover-icon-color [contrast-color: ('gray', 700)] - The item's hover icon color.
+/// @prop {Map} item-header-text-color [color: ('gray', 600)] - The header's idle text color.
+/// @prop {Map} item-text-color [color: ('gray', 800)] - The item's idle text color.
+/// @prop {Map} item-icon-color [color: ('gray', 600)] - The item's icon color.
+/// @prop {Map} item-active-text-color [color: ('primary', 500)] - The item's active text color.
+/// @prop {Map} item-active-background [color: ('primary', 300, .3)] - The item's active background color.
+/// @prop {Map} item-active-icon-color [color: ('primary', 500)] - The item's icon active color.
+/// @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} elevation [0] - The elevation level, between 0-24, to be used for the drawer.
-/// @prop {Color} border-color [transparent] - The navigation drawer right border color.
-/// @prop {List} item-border-radius [(rem(24px), rem(0), rem(24px))] - The border radius used for the navdrawer items.
+/// @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.
 /// @requires {Map} $light-navdrawer
 /// @requires {Map} $indigo-elevation-navdrawer
 $indigo-navdrawer: extend(
     $light-navdrawer,
     $indigo-elevation-navdrawer,
     (
-        border-color: transparent,
-
-        background: (
+        border-color: (
             color: (
                 'gray',
-                700,
+                300,
             ),
         ),
 
         item-header-text-color: (
             color: (
                 'gray',
-                50,
+                600,
             ),
         ),
 
         item-text-color: (
             color: (
                 'gray',
-                300,
-                0.8,
+                800,
             ),
         ),
 
         item-icon-color: (
             color: (
                 'gray',
-                300,
-                0.8,
+                600,
             ),
         ),
 
         item-active-background: (
             color: (
-                'gray',
-                600,
-                0.8,
+                'primary',
+                300,
+                0.3,
             ),
         ),
 
         item-active-text-color: (
             color: (
-                'gray',
-                50,
+                'primary',
+                500,
             ),
         ),
 
         item-active-icon-color: (
             color: (
-                'gray',
-                50,
+                'primary',
+                500,
             ),
         ),
 
-        item-hover-background: transparent,
+        item-hover-background: (
+            color: (
+                'gray',
+                900,
+                0.05,
+            ),
+        ),
 
         item-hover-text-color: (
             color: (
                 'gray',
-                100,
+                900,
             ),
         ),
 
         item-hover-icon-color: (
             color: (
                 'gray',
-                100,
+                700,
             ),
         ),
 
         item-border-radius: (
             border-radius: (
-                rem(24px),
+                rem(4px),
                 rem(0),
-                rem(24px),
+                rem(4px),
             ),
         ),
     )

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

@@ -17,14 +17,15 @@
 /// @prop {Color} track-off-color [transparent] - The color of the track when the switch is off.
 /// @prop {Map} thumb-on-disabled-color [color: ('secondary', 100)] - The color of the thumb when the switch is on and disabled.
 /// @prop {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled.
-/// @prop {Map} label-color [color: ('gray', 900)] - The color of the switch label
+/// @prop {Map} label-color [color: ('gray', 900)] - The color of the switch label.
+/// @prop {Map} label-hover-color [color: ('gray', 900)] - The color of the switch label on hover.
 /// @prop {Map} label-disabled-color [color: ('gray', 500)] - The color of the switch label when the switch is disabled
 /// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [3] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {Number} disabled-elevation [1] - The elevation level, between 0-24, to be used for the disabled state.
 /// @prop {List} border-radius-thumb [(rem(10px), rem(0), rem(10px))] - The border radius used for switch thumb.
 /// @prop {List} border-radius-ripple [(rem(24px), rem(0), rem(24px))] - The border radius used for switch ripple.
-/// @prop {Map} border-on-color [color('primary', 500)] - The border color of the on-switch.
+/// @prop {Map} border-on-color [color: ('primary', 500)] - The border color of the on-switch.
 /// @prop {Map} label-invalid-color [color: ('gray', 900)] - The color of the switch label in invalid state.
 /// @prop {Map} track-on-disabled-color [color: ('secondary', 50)] - The color of the track when the switch is on and disabled.
 /// @prop {Map} track-error-color [color: ('gray', 500)] - The color of the track in invalid state when the switch is off.
@@ -65,6 +66,12 @@ $light-switch: extend(
                 900,
             ),
         ),
+        label-hover-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
         label-disabled-color: (
             color: (
                 'gray',
@@ -118,7 +125,7 @@ $light-switch: extend(
 /// @prop {Color} border-color [transparent] - The border color of the switch.
 /// @prop {Color} border-hover-color [transparent] - The border color of the switch on hover.
 /// @prop {Color} border-on-color [transparent] - The border color of the on-switch.
-/// @prop {Color} border-on-hover-color [transparent] - The border color of the  on-switch.
+/// @prop {Color} border-on-hover-color [transparent] - The hover border color when the switch is on.
 /// @prop {Color} border-disabled-color [transparent] - The border color of the disabled switch.
 /// @prop {Map} thumb-on-color [color: ('secondary', 500)] - The color of the thumb when the switch is on.
 /// @prop {Map} thumb-off-color [color: ('gray', 50)] - The color of the thumb when the switch is off.
@@ -126,6 +133,7 @@ $light-switch: extend(
 /// @prop {Map} thumb-on-error-color [color: ('secondary', 500)] - The color of the thumb when the switch is on and invalid.
 /// @prop {Map} track-off-color [color: ('gray', 500)] - The color of the track when the switch is off.
 /// @prop {Map} track-on-color [color: ('secondary', 200)] - The color of the track when the switch is on.
+/// @prop {Map} track-on-hover-color [color: ('secondary', 200)] - The color of the track when the switch is on and hovered.
 /// @prop {Map} track-disabled-color [color: ('gray', 300)] - The color of the track when the switch is disabled.
 /// @prop {Map} error-color [color: ('gray', 50)] - The color of the thumb in invalid state.
 /// @prop {Map} error-color-hover [color: ('gray', 500)] - The border color in invalid state on hover.
@@ -176,6 +184,12 @@ $material-switch: extend(
                 200,
             ),
         ),
+        track-on-hover-color: (
+            color: (
+                'secondary',
+                200,
+            ),
+        ),
         track-disabled-color: (
             color: (
                 'gray',
@@ -206,10 +220,10 @@ $material-switch: extend(
 
 /// Generates a fluent switch schema.
 /// @type {Map}
-/// @prop {Map} border-color [color('gray', 700)] - The border color of the switch.
-/// @prop {Map} border-hover-color [color('gray', 800)] - The border color of the switch on hover.
-/// @prop {Map} border-disabled-color [color('gray', 400)] - The border color of the disabled switch.
-/// @prop {Map} border-on-hover-color [color('primary', 800)] - The border color of the on-switch.
+/// @prop {Map} border-color [color: ('gray', 700)] - The border color of the switch.
+/// @prop {Map} border-hover-color [color: ('gray', 800)] - The border color of the switch on hover.
+/// @prop {Map} border-disabled-color [color: ('gray', 400)] - The border color of the disabled switch.
+/// @prop {Map} border-on-hover-color [color: ('primary', 800)] - The hover border color when the switch is on.
 /// @prop {Map} thumb-off-color [color: ('gray', 700)] - The color of the thumb when the switch is off.
 /// @prop {Map} track-on-hover-color [color: ('primary', 800)] - The color of the track when the switch is on and hovered.
 /// @prop {Map} track-on-disabled-color [color: ('gray', 400)] - The color of the track when the switch is on and disabled.
@@ -402,33 +416,86 @@ $bootstrap-switch: extend(
 
 /// Generates an indigo switch schema.
 /// @type {Map}
-/// @prop {Map} thumb-off-color [color: ('gray', 600)] - The color of the thumb when the switch is off.
-/// @prop {Map} thumb-disabled-color [color: ('gray', 300)] - The color of the thumb when the switch is disabled.
-/// @prop {Map} border-color [color: ('gray', 600)] - The border color of the switch.
+/// @prop {Map} label-color [color: ('gray', 800)] - The color of the switch label.
+/// @prop {Map} label-invalid-color [color: ('gray', 800)] - The color of the switch label in invalid state.
+/// @prop {Map} label-disabled-color [color: ('gray', 900, .2)] - The color of the switch label when the switch is disabled
+/// @prop {Map} thumb-on-color [contrast-color: ('gray', 900)] - The color of the thumb when the switch is on.
+/// @prop {Map} track-on-hover-color [color: ('primary', 400)] - The color of the track when the switch is on and hovered.
+/// @prop {Map} thumb-off-color [color: ('gray', 500)] - The color of the thumb when the switch is off.
+/// @prop {Map} thumb-disabled-color [color: ('gray', 900, .15)] - The color of the thumb when the switch is disabled.
+/// @prop {Map} thumb-on-disabled-color [contrast-color: ('gray', 900, .4)] - The color of the thumb when the switch is on and disabled.
+/// @prop {Map} track-on-disabled-color [color: ('primary', 400, .5)] - The color of the track when the switch is on and disabled.
+/// @prop {Map} border-color [color: ('gray', 500)] - The border color of the switch.
 /// @prop {Map} border-hover-color [color: ('gray', 600)] - The border color of the switch on hover.
-/// @prop {Map} border-disabled-color [color: ('gray', 300)] - The border color of the disabled switch.
-/// @prop {Map} border-on-hover-color [color: ('primary', 500)] - The border color of the  on-switch.
-/// @prop {Map} label-disabled-color [color: ('gray', 300)] - The color of the switch label when the switch is disabled
+/// @prop {Map} border-disabled-color [color: ('gray', 900, .15)] - The border color of the disabled switch.
+/// @prop {Map} border-on-hover-color [color: ('primary', 400)] - The hover border color when the switch is on.
 /// @prop {Map} error-color [color: ('gray', 500)] - The border and thumb color in invalid state.
 /// @prop {Map} error-color-hover [color: ('gray', 300)] - The border and thumb color in invalid state on hover.
 /// @prop {Color} track-error-color [transparent] - The color of the track in invalid state when the switch is off.
 /// @prop {List} border-radius-track [(rem(8px), rem(0), rem(8px))] - The border radius used for switch track.
-/// @prop {Map} focus-outline-color [color: ('gray', 300)] - The focus outlined color.
-/// @prop {Map} focus-outline-color-focused [color: ('primary', 200)] - The focus outlined color for focused state.
+/// @prop {Map} focus-outline-color [color: ('gray', 900, .15)] - The focus outlined color.
+/// @prop {Map} focus-outline-color-focused [color: ('primary', 400, .5)] - The focus outlined color for focused state.
 /// @requires $light-switch
 $indigo-switch: extend(
     $light-switch,
     (
+        label-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+        label-invalid-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+        label-disabled-color: (
+            color: (
+                'gray',
+                900,
+                0.2,
+            ),
+        ),
+        thumb-on-color: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
+        thumb-on-disabled-color: (
+            contrast-color: (
+                'gray',
+                900,
+                0.4,
+            ),
+        ),
+        track-on-hover-color: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+        track-on-disabled-color: (
+            color: (
+                'primary',
+                400,
+                0.5,
+            ),
+        ),
         focus-outline-color: (
             color: (
                 'gray',
-                300,
+                900,
+                0.15,
             ),
         ),
         focus-outline-color-focused: (
             color: (
                 'primary',
-                200,
+                400,
+                0.5,
             ),
         ),
         border-color: (
@@ -440,25 +507,26 @@ $indigo-switch: extend(
         border-hover-color: (
             color: (
                 'gray',
-                500,
+                600,
             ),
         ),
         border-disabled-color: (
             color: (
                 'gray',
-                300,
+                900,
+                0.15,
             ),
         ),
         border-on-hover-color: (
             color: (
                 'primary',
-                500,
+                400,
             ),
         ),
         thumb-off-color: (
             color: (
                 'gray',
-                600,
+                500,
             ),
         ),
         error-color: (
@@ -477,13 +545,8 @@ $indigo-switch: extend(
         thumb-disabled-color: (
             color: (
                 'gray',
-                300,
-            ),
-        ),
-        label-disabled-color: (
-            color: (
-                'gray',
-                300,
+                900,
+                0.15,
             ),
         ),
         border-radius-track: (